import { View } from "@tarojs/components";
import { ArrowDown, ArrowUp } from "@taroify/icons";
import { useState } from "react";

interface CollapseProps {
  title?: string | React.ReactNode;
  extra?: string | React.ReactNode;
  children?: React.ReactNode;
  content?: string | React.ReactNode;
  collapse?: React.ReactNode;
  change?: () => void;
}

export default ({ title, extra, content, change, children }: CollapseProps) => {
  const [show, setShow] = useState(false);
  return (
    <View>
      <View className="flex justify-between items-center">
        <View className="font-semibold text-base">{title}</View>
        <View className="flex gap-1 items-center">
          {extra && <View>{extra}</View>}
          <View
            onClick={() => {
              change && change();
              setShow(!show);
            }}
          >
            {show ? (
              <ArrowUp size={22} color="#A5A5A5" />
            ) : (
              <ArrowDown size={22} color="#A5A5A5" />
            )}
          </View>
        </View>
      </View>
      {!show && content && <View>{content}</View>}
      {show && children}
    </View>
  );
};
